<template>
  <div class="msContain msContainSimple" @click="currentChart.onClick"
       style="background: transparent; border: none;">
    <div class="msMain" :style="workBook.chartConfig.style">
      <div class="msMainValue"
           :style="workBook.chartConfig.style.measure">
        {{ currentChart.msMainValue }}
      </div>
      <div class="msFooterValue" :title="currentChart.msMainTitle"
           :style="workBook.chartConfig.style.title">
        {{ workBook.chartConfig.style.title.content || currentChart.msMainTitle }}
        <span
          :style="{...workBook.chartConfig.style.percent,color:currentChart.msFooter_1_Flag=='up'?workBook.chartConfig.style.percent.color1:workBook.chartConfig.style.percent.color2}"
          v-show="currentChart.msFooter_0_Value">
            <i
              :class="currentChart.msFooter_1_Flag=='up'?'glyphicon glyphicon-arrow-up':'glyphicon glyphicon-arrow-down'"
              :style="workBook.chartConfig.style.icon"></i>
            {{ currentChart.msFooter_1_Value }}
          </span>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, onMounted, ref} from 'vue'
import {buildChart} from '@/components/chart/buildChart/jq-measure-sticker'

export default defineComponent({
  name: "IndicatorStickers",
  props:{
    workBook:Object
  },
  setup(prop,context){
    const currentChart = ref({})
    /**
     * 图表实现方法
     * @param data 数据
     * @param columnFields 列字段
     * @param rowFields 行字段
     * @param chartMode 图表类型
     * @param options 配置项
     */
    const build = (data, columnFields, rowFields, chartMode, options) => {
      return new Promise((resolve, reject) => {
        currentChart.value = buildChart(null, data, columnFields, rowFields, chartMode, options);
        resolve(currentChart.value)
      })
    }

    onMounted(()=>{
      context.emit('initEnd')
    })

    return {
      build,
      currentChart
    }
  }
})
</script>

<style scoped>

</style>
